Delete modal

When an user tries to delete an item we generally want to show a confirmation popup before actually performing that action.

We can do this using the DeleteModal component.

Props

interface IDeleteModalTranslations {  cancelButtonKey?: string;  confirmButtonKey?: string;  titleKey?: string;  descriptionKey?: string;}
interface IDeleteModalProps {  // Required props  isOpen: boolean;  onCancel: () => void;  onConfirm: () => void;  // Optional props  isLoading?: boolean;  fullWidth?: boolean;  maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';  translations?: IDeleteModalTranslations;}

Usage

const Example = () => {  // ...
  const [itemToDelete, setItemToDelete];
  const { handleDelete, isLoading } = useDeleteItem();
  const onConfirmDelete = useCallback(() => {    handleDelete(itemToDelete);    setItemToDelete(undefined);  }, [handleDelete, itemToDelete]);
  const onCancelDelete = useCallback(() => {    setItemToDelete(undefined);  }, []);
  // ...
  return (    // ...    <DeleteModal      maxWidth="md"      isOpen={!!itemToDelete}      onConfirm={onConfirmDelete}      onCancel={onCancelDelete}      isLoading={isLoading}    />  );};

Translations

Add these translations to the module. Make sure there are no duplicates.

{  "generic.question.are-you-sure": "Are you sure?",  "generic.delete-modal.description": "Are you sure you want to delete this?",  "generic.action.cancel": "Cancel",  "generic.action.confirm": "Confirm"}

You can also override the translation key for each message displayed by this component using the translations prop.

<DeleteModal  maxWidth="md"  isOpen={!!openingHoursTemplateToDelete}  onConfirm={onConfirmDelete}  onCancel={onCancelDelete}  isLoading={isLoading}  translations={{    titleKey: 'opening-hours-templates.overview.delete-opening-hours-template.modal.title',    descriptionKey: 'opening-hours-templates.overview.delete-opening-hours-template.modal.message',    cancelButtonKey: 'generic.label.no',    confirmButtonKey: 'generic.label.yes',  }}/>